<template>
  <div class="content-container">
    <div class="flex">
      <div class="profile">
        <div style="margin-left: 1rem; margin-top: 0.4rem;">
          <profile />
        </div>
      </div>
      <div class="acount">
        <coin icon="coin" />
        <coin icon="diamond" style="margin-left: 1rem;" />
      </div>
    </div>
    <div class="flex">
      <div class="notice">
        <notice />
      </div>
      <div class="activity">
        <img src="/src/assets/icon/UI_Icon_qiandao.png" style="width: 6.5rem; height: auto; padding-right: 1rem;" />
        <img src="/src/assets/icon/UI_Icon_xinshou.png" style="width: 6.5rem; height: auto; padding-right: 1rem;" />
      </div>
    </div>

    <div class="game-panel">
      <caishen assetUrl="/src/assets/menu/caisheng/caisheng.json" :offset="[30,30,0,20]" />
      <caishen assetUrl="/src/assets/menu/jinqiu/jinqiu.json" :offset="[0,0,0,0]"  />
      <caishen assetUrl="/src/assets/menu/aomenhaomeng/aomenhaomeng.json" :offset="[-30,20,5,5]"  />
      <caishen assetUrl="/src/assets/menu/bitetaojin/bitetaojin.json" :offset="[20, -25,-5,3]"  />
      <caishen assetUrl="/src/assets/menu/jinshe/jinshe.json" :offset="[ 5,20, 2, 25]"  />
      <caishen assetUrl="/src/assets/menu/kuaiqianlaile/kuaiqianlaile.json" :offset="[0,-5,8,10]"  />
      <caishen assetUrl="/src/assets/menu/shaolin/shaolin.json" :offset="[-30, 10, 0, 30]"  />
      <caishen assetUrl="/src/assets/menu/majiang/majiang.json" :offset="[14, -10,6, 0]"  />
      <caishen assetUrl="/src/assets/menu/liyue/liyue.json" :offset="[-20,10,4,10]"  />
      <caishen assetUrl="/src/assets/menu/yezui/yezui.json" :offset="[10,10,3,10]"  />
      <caishen assetUrl="/src/assets/menu/zhaocai/zhaocai.json" :offset="[0,10,0,10]"  />
      <caishen assetUrl="/src/assets/menu/huangjin/huangjin.json" :offset="[-20,-60,5,10]"  />
    </div>


    <div class="flex">
      <div class="menu">
        <img src="/src/assets/icon/UI_Icon_chongzhi.png" style="width: 6.5rem; height: auto; padding-left: 1rem;" @click="showRecharge" />
        <img src="/src/assets/icon/UI_Icon_kefu.png" style="width: 7.8rem; height: auto; padding-left: 1rem;" @click="toChat" />
      </div>
    </div>

    <modal2 ref="modal2Ref"></modal2>
  </div>
</template>

<script setup>
import profile from '@/components/profile.vue';
import coin from '@/components/coin.vue'
import notice from '@/components/notice.vue'
import caishen from '@/components/caishen.vue'

import { ref } from 'vue'
import { useRouter } from 'vue-router';

import modal2 from '@/components/modal2.vue'

const router = useRouter()

const modal2Ref = ref()

function toChat() {
  router.push('/chat-app')
}

function showRecharge() {
  modal2Ref.value.show()
}
</script>

<style lang="scss" scoped>
.content-container {
  width: 100%;
  height: 100%;
  background: transparent;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 2;
  align-items: flex-end;
  overflow: hidden;
}

.flex {
  display: flex;
  justify-content: space-between;
  width: 100%;

  &.center-v {
    align-items: center;
  }

  // >div {
  //   border: 1px solid #e2e2e2;
  // }
}

.profile {
  flex: 1;
  height: 7rem;
}
.acount {
  flex: 1.4;
  height: 7rem;
  display: flex;
  justify-content: flex-end;
  padding-top: 2rem;
  box-sizing: border-box;
  padding-right: 1rem;
}
.notice {
  flex: 1.8;
  height: 7rem;
}
.activity {
  flex: 1;
  height: 7rem;
  align-items: center;
  justify-content: flex-end;
  display: flex;
}
.menu {
  flex: 1;
  height: 7rem;
  align-items: center;
  justify-content: flex-start;
  display: flex;
  padding-bottom: 1rem;
  padding-left: 1rem;
}

.game-panel {
  flex: 1;
  width: 50%;
  overflow: scroll;
}
</style>